<template>
  <div class="knowledge-container-padding">
    <vxe-grid
      ref="xGrid"
      border
      keep-source
      auto-resize
      sync-resize
      :height="height"
      :loading="listLoading"
      size="small"
      :column-config="{ resizable: true }"
      :export-config="{}"
      :columns="tableColumn"
      align="center"
      :row-config="{ keyField: 'id', isCurrent: true, isHover: true }"
      @reset="queryData"
    >
      <template #form>
        <vxe-form
          ref="queryform"
          title-align="right"
          title-width="120"
          prevent-submit
        >
          <vxe-form-item title="角色名称">
            <template #default>
              <el-input
                v-model="queryForm.name"
                placeholder="角色名称"
                style="width: 240px"
                clearable
              />
            </template>
          </vxe-form-item>
          <vxe-form-item title="角色标识">
            <template #default>
              <el-input
                v-model="queryForm.code"
                placeholder="角色标识"
                style="width: 240px"
                clearable
              />
            </template>
          </vxe-form-item>
          <vxe-form-item>
            <el-button type="primary" @click="queryData">搜索</el-button>
            <el-button v-permissions="{ permission: ['system:role:create'] }">
              重置
            </el-button>
          </vxe-form-item>
        </vxe-form>
      </template>
      <template #bottom>
        <el-pagination
          background
          :current-page="queryForm.pageNo"
          :layout="layout"
          :page-size="queryForm.pageSize"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </template>
      <template #status="{ row }">
        <el-switch
          v-model="row.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="0"
          :inactive-value="1"
          @change="changeRoleStatus(row)"
        />
      </template>
      <template #userAssociation="{ row }">
        <div>
          <el-tag :type="row.isRelatedSysUser > 0 ? 'success' : 'danger'" hit>
            {{ row.isRelatedSysUser > 0 ? '&emsp;是&emsp;' : '&emsp;否&emsp;' }}
          </el-tag>
        </div>
      </template>
      <template #resourceAssociation="{ row }">
        <div>
          <el-tag :type="row.isRelatedSysMenu > 0 ? 'success' : 'danger'" hit>
            {{ row.isRelatedSysMenu > 0 ? '&emsp;是&emsp;' : '&emsp;否&emsp;' }}
          </el-tag>
        </div>
      </template>
      <!--<template #operate="{ row }">
        <div>
          <el-link type="primary">详情</el-link>
        </div>
      </template>-->
    </vxe-grid>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import { getRolePage } from '@/api/system/role'

  export default defineComponent({
    name: 'ProjectKnowledgeList',
    setup() {
      const $baseTableHeight = inject('$baseTableHeight')
      const state = reactive({
        height: $baseTableHeight(0),
        xGrid: 'xGrid',
        tableColumn: [
          {
            title: '角色名称',
            field: 'name',
            minWidth: 160,
          },
          {
            title: '角色标识',
            field: 'code',
            width: 160,
          },
          {
            title: '是否已关联系统用户',
            width: 80,
            slots: { default: 'userAssociation' },
          },
          {
            title: '是否已关联系统资源',
            width: 80,
            slots: { default: 'resourceAssociation' },
          },
          {
            title: '备注',
            field: 'remarks',
            minWidth: 120,
          },
          {
            title: '状态',
            width: 120,
            slots: { default: 'status' },
          },
          {
            title: '排序',
            field: 'sort',
            width: 80,
          },
          {
            title: '操作',
            minWidth: 200,
            fixed: 'right',
            slots: { default: 'operate' },
          },
        ],
        list: [],
        listLoading: false,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        queryForm: {
          pageNo: 1,
          pageSize: 30,
        },
      })

      const handleSizeChange = (val) => {
        state.queryForm.pageSize = val
        fetchData()
      }

      const handleCurrentChange = (val) => {
        state.queryForm.pageNo = val
        fetchData()
      }

      const queryData = () => {
        state.queryForm.pageNo = 1
        fetchData()
      }

      const fetchData = async () => {
        state.listLoading = true
        getRolePage(state.queryForm)
          .then((res) => {
            if (res.code == 0 || res.code == 200) {
              state['xGrid'].reloadData(res.data.list)
              state.total = res.data.total
              state.listLoading = false
            } else {
              state.listLoading = false
            }
          })
          .catch((err) => {
            state.listLoading = false
          })
      }

      onMounted(() => {
        fetchData()
      })

      onBeforeMount(() => {
        window.addEventListener('resize', handleHeight)
      })

      onBeforeUnmount(() => {
        window.removeEventListener('resize', handleHeight)
      })

      const handleHeight = () => {
        state.height = $baseTableHeight(0)
      }

      return {
        ...toRefs(state),
        handleSizeChange,
        handleCurrentChange,
        queryData,
        fetchData,
      }
    },
  })
</script>

<style scoped></style>
